<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import popUp from '@/views/popup.vue'
import PromptBox from '@/views/PromptBox.vue'
import packageBox from '@/views/packageBox.vue'
import {
	getBatchList,
	getPaperList,
	bindBatchAndPaper,
	startClked
} from './api/client'
import skStorage from './utils/storage'

interface PageType {
	id: number
	name: string
}
interface BatchType {
	id?: number
	name?: string
	paperId?: number | string
	paperName?: string
}
interface StateType {
	batchList: BatchType[]
	paperList: PageType[]
	currentBatch: BatchType
	batchItem: BatchType
}
// visible变量控制弹框的状态
let visible = ref(false)
let PromptBoxState = ref(false)
let PackageBoxState = ref(false)
let messageTitle: string = '请确定是否解绑?'
let PackageMessageTitle: string = '是否打包?'
let state: StateType = reactive({
	batchList: [],
	paperList: [],
	currentBatch: {},
	batchItem: {}
})

onMounted(async () => {
	//获取批次列表
	const list = await getBatchList()
	state.batchList = skStorage.get('batchList')
		? skStorage.get('batchList')
		: list
	state.paperList = await getPaperList()
})

// 打包点击事件弹出提示框
const packEvent = async () => {
	PackageBoxState.value = true
}
// 点击确认打包
const PackagePromptBox = async (data: boolean, state: boolean) => {
	PackageBoxState.value = data
	if (state) {
		let res = await startClked()
		if (res.code === '0') {
			window.confirm('操作成功!')
		} else {
			window.confirm('操作失败!')
		}
	}
}

const bindPaper = (val: any) => {
	visible.value = true
	state.currentBatch = val
}

// 改变弹框的状态为false
const onChange = (val: boolean) => {
	visible.value = val
}

// 获取绑定的试卷ID与name
const onPaperBind = async (data: any, val: boolean) => {
	visible.value = val
	state.currentBatch.paperId = data.id
	state.currentBatch.paperName = data.name
	await bindBatchAndPaper({
		batchId: state.currentBatch.id, //批次id
		paperId: data.id //试卷id
	})
}
const changePromptBox = async (val: boolean, BoxState: boolean) => {
	PromptBoxState.value = val
	if (BoxState) {
		state.batchList.map((item: BatchType) => {
			if (item.id === state.batchItem.id) {
				item.paperId = ''
				item.paperName = ''
			}
		})

		await bindBatchAndPaper({
			batchId: state.currentBatch.id, //批次id
			paperId: -1 //解绑 试卷id为-1
		})
	}
}
// 取消试卷的绑定
const cancelBind = async (data: any) => {
	if (data.paperId) {
		PromptBoxState.value = true
		state.batchItem = data
	}
}

const columns = [
	{
		key: '批次ID',
		title: '批次ID',
		dataIndex: 'id',
		width: '100px',
		align: 'center'
	},
	{
		key: 'name',
		title: '批次',
		dataIndex: 'name',
		align: 'center',
		width: '200px'
	},
	{
		key: '试卷ID',
		title: '试卷ID',
		dataIndex: 'paperId',
		width: '100px',
		align: 'center'
	},
	{
		key: 'paperName',
		title: '试卷',
		dataIndex: 'paperName',
		align: 'center',
		width: '600px'
	},
	{
		title: '操作',
		key: 'action',
		align: 'center'
	}
]
</script>

<template>
	<div class="container">
		<div class="main">
			<span class="title">XXX打包工具</span>
			<a-button class="btnPackage" type="primary" @click="packEvent">
				打包
			</a-button>
			<a-table
				:data-source="state.batchList"
				:columns="columns"
				:pagination="false"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'action'">
						<span>
							<a-button @click="bindPaper(record)" type="primary">
								绑定试卷
							</a-button>
							<a-button
								@click="cancelBind(record)"
								type="primary"
								:style="{ marginLeft: '20px' }"
							>
								解绑试卷
							</a-button>
						</span>
					</template>
				</template>
			</a-table>
		</div>
		<popUp
			:visible="visible"
			@onChange="onChange"
			:paperList="state.paperList"
			@on-bind="onPaperBind"
		></popUp>
		<PromptBox
			:visible="PromptBoxState"
			@onchange="changePromptBox"
			:messageTitle="messageTitle"
		></PromptBox>
		<packageBox
			:visible="PackageBoxState"
			@onchange="PackagePromptBox"
			:messageTitle="PackageMessageTitle"
		></packageBox>
	</div>
</template>

<style lang="less" scoped>
.container {
	width: 100vw;
	height: 100vh;
	background-color: #f0f2f5;
	display: flex;
	align-items: center;
	justify-content: center;
	.main {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 30px;
		.btnPackage {
			position: relative;
			left: 45%;
			margin-bottom: 10px;
			background-color: red;
			border: none;
		}
		.title {
			font-size: 18px;
			font-weight: 600;
		}
	}
}
</style>
